<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <style>
        .my-adoptions {
            margin-top: 20px;
        }

        .my-adoptions img {
            max-width: 80px;
            height: auto;
            border-radius: 8px;
        }
        .green-text {
            color: green;
        }

        .red-text {
            color: red;
        }
    </style>
    <title>我的领养</title>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="/index.html">首页</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="/adopt.html">我的领养</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/person.html">个人信息</a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="/logout">退出</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container my-adoptions">
    <h2>我的领养</h2>
    <table class="table table-bordered" id="adoptionsTable">
        <thead>
        <tr>
            <th scope="col">宠物名称</th>
            <th scope="col">宠物类型</th>
            <th scope="col">申请状态</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>

<script src="/js/jquery.min.js"></script>
<script>
    $.ajax({
        url: '/my/adopt',
        method: 'GET',
        success: function (data) {
            data.forEach(function (adoption) {
                var statusText = getStatusText(adoption.status);
                var colorClass = (adoption.status === 1) ? 'green-text' : ((adoption.status === 2) ? 'red-text' : '');

                var rowHtml = '<tr>' +
                    '<td>' + adoption.petName + '</td>' +
                    '<td>' + adoption.petType + '</td>' +
                    '<td class="' + colorClass + '">' + statusText + '</td>' +
                    '</tr>';
                $('#adoptionsTable tbody').append(rowHtml);
            });
        },
        error: function (error) {
            console.error('出错:', error);
        }
    });

    function getStatusText(status) {
        switch (status) {
            case 0:
                return '未审核';
            case 1:
                return '通过';
            case 2:
                return '未通过';
        }
    }

</script>


</body>
</html>
